<template>
	<view class="questiondetails-page">
		<view class="questiondetails-page-header">
			<mynavBar :title="title" :gps="gps" :bgcolor="bgColor" :backgrouncolor="backgrouncolor"></mynavBar>
		</view>
		<!-- 内容 -->
		<view class="questiondetails-content">
			<!-- 问题详情内容 -->
			<view class="questiondetails-content-top">
				<view class="content-top-body">
					<view class="content-top-title">
						<span class="title-text">{{actionInfo.title}}</span>
						<img :src="queryImage('questondetalogo1')" alt="" class="top-title-img">
					</view>
					<view class="content-top-text" v-if="actionInfo.content">
						<span>{{actionInfo.content}}</span>
						<view v-if="actionInfo.type!='悬赏提问'" @click.stop="answerBtn">

							<span style="float: right; font-size: 25rpx;">评论</span>

							<img :src="queryIconImage('questiondetalogo5')" alt=""
								style="width: 40rpx;height: 40rpx;margin-right: 8rpx;float: right;">
						</view>
						<view v-else-if="actionInfo.type=='悬赏提问' && invited_user.length==0" @click.stop="answerBtn">
							<span style="float: right; font-size: 25rpx;">评论</span>
							<img :src="queryIconImage('questiondetalogo5')" alt=""
								style="width: 40rpx;height: 40rpx;margin-right: 8rpx;float: right;">
						</view>
						<view v-else="actionInfo.type=='悬赏提问' && invited_user.length!=0" @click.stop="answerBtn">
							<span style="float: right; font-size: 25rpx;">评论</span>
							<img :src="queryIconImage('questiondetalogo5')" alt=""
								style="width: 40rpx;height: 40rpx;margin-right: 8rpx;float: right;">
						</view>
						<!-- <span style="float: right; font-size: 25rpx;" @click.stop="answerBtn"
							v-if="actionInfo.type!='悬赏提问'">评论</span>
						<span style="float: right; font-size: 25rpx;"
							v-else-if="actionInfo.type=='悬赏提问' && invited_user.length==0"
							@click.stop="answerBtn">评论</span>
						<span style="float: right; font-size: 25rpx;"
							v-else="actionInfo.type=='悬赏提问' && invited_user.length!=0" @click.stop="answerBtn">评论</span>
						<img :src="queryIconImage('questiondetalogo5')" alt=""
							style="width: 40rpx;height: 40rpx;margin-right: 8rpx;float: right;"> -->

					</view>
					<view class="content-top-video" v-if="actionInfo?.video?.length>0">
						<view class="video-list" v-for="(v,i) in actionInfo?.video??[]" :key="i">
							<video :src="v?.url" v-if="v?.url"
								style="width: 100%; height: 300rpx;margin: 10rpx 0;"></video>
						</view>
					</view>
					<view class="content-top-img" v-if="actionInfo?.img?.length>0"
						style="display: flex; flex-wrap: wrap;">
						<view class="video-list" v-for="(v,i) in actionInfo?.img??[]" :key="v.id">
							<img mode="aspectFit" src="" alt="" :src="v?.url" v-if="v?.url"
								@click="clickImg(i,actionInfo?.img)"
								style="width: 120rpx; height: 120rpx; margin: 10rpx 10rpx;">
						</view>
					</view>
					<view class="content-top-bottom">
						<view class="top-bottom-left">
							<img :src="actionInfo?.user?.avatar?actionInfo?.user?.avatar?.url:queryImage('modelone1')"
								alt="" style="width: 50rpx;height: 50rpx;border-radius: 50rpx 50rpx 50rpx 50rpx;">

							<span class="bottom-left-name">{{actionInfo?.user?.nickname}}</span>

							<span>的提问</span>
							<!-- <span class="answerBtnCss2" @click.stop="answerBtn" v-if="actionInfo.type!='悬赏提问'">答主跳过</span> -->
							<span class="bottom-left-reward"
								v-if="actionInfo?.price_cny">悬赏{{actionInfo?.price_cny}}元</span>

							<!-- <span class="answerBtnCss2" v-if="actionInfo.type=='悬赏提问' && invited_user.length==0" @click.stop="answerBtn">答主跳过</span> -->
						</view>
						<view class="top-bottom-right">
							<span>{{ $utils.dateFormat(actionInfo.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
						</view>
					</view>
					<view class="content-top-userInfo" v-if="actionInfo.type=='悬赏提问' && invited_user.length!=0">
						<span class="answerCss">受邀答主</span>
						<!-- <span class="answerBtnCss" @click.stop="answerBtn">答主跳过</span> -->
						<view class="content-top-userInfo-top">
							<view v-for="(item,index) in invited_user" :key="index"
								style='transform:translateX({{-index*20}}rpx)'>
								<image :src="item.avatar.url" mode="aspectFill" class="content-top-userInfo-topImg"
									@click="clickInvitedUser(item)">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 评论内容 -->
			<view class="questiondetails-content-comment">
				<!-- 评论头部 -->
				<!-- 评论头部 -->
				<view class="content-comment-header">
					<view class="comment-header-left">
						<span style="color: #000000;">{{actionInfo?.commentCount}}</span>
						<span>个回答</span>
					</view>
					<view class="comment-header-right">
						<img v-if="followNumNull==false" :src="queryIconImage('answerpostion2')"
							style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" @click="follow(articleId)">

						<img :src="queryIconImage('answerpostion3')" v-else alt=""
							style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" @click="follow(articleId)">


						<button open-type="share" class="content-bottom-rightbtn" @click="startmethod(e)"
							:disabled="editBlean">
							<img :src="queryImage('questiondetalogo3')" alt="" style="width: 36rpx;height: 36rpx;">
						</button>
					</view>
				</view>


				<!-- 评论内容 -->
				<view class="content-comment-body">
					<view class="comment-body-list" v-for="(item,index) in answerInfo" :key="index"
						:style="commentlistLindex==index  ?'padding:0;':''">
						<view class="body-list-body"
							v-if="actionInfo.user && actionInfo.user.id && (actionInfo.user.id == this.userId || item.public || item.user.id==this.userId)"
							@click="checkCommentAuth(item) ?expand(index):showhideblean(item?.id)">
							<view class="body-list-top" v-if="commentlistLindex!==index ">
								<view class="list-tops">
								</view>
							</view>

							<view :class="commentlistLindex==index?'body-list-bootomindex':'body-list-bootom'">

								<view class="list-bootom-top">
									<view style="display: flex;align-items: center;">
										<view class="bootom-top-left">
											<img :src="item?.user?.avatar?.url||queryImage('modelone1')" alt=""
												style="width: 50rpx;height: 50rpx;border-radius: 50rpx 50rpx 50rpx 50rpx;">
											<span class="bottom-left-name">{{item?.user?.nickname}}</span>
										</view>
										<view class="bootom-top-right" v-if="commentlistLindex!==index">
											<span>{{ $utils.dateFormat(item?.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
										</view>
										<view class="bootom-top-btn" v-else
											@click.stop="popularrate(item?.id, item?.score)">
											<span>去评分</span>
										</view>
									</view>

									<!-- 提问者和答题者可以看到自己的答题 -->
									<view :class="checkCommentAuth(item)?'':'hideblean'"
										@click.stop="showhideblean(item?.id)"
										v-if="actionInfo.user && actionInfo.user.id">

									</view>

									<view class="container">
										<!-- 内容 -->
										<view class="list-bootom-content" v-if="actionInfo.user && actionInfo.user.id"
											:style="checkCommentAuth(item)?'-webkit-line-clamp: 4;':'-webkit-line-clamp: 1;'">
											<span>{{item?.content}}</span>
										</view>
										<view v-for="(v,i) in item?.video" :key="v.id">
											<view class="list-bootom-bootm" v-if="v?.video?.url && v?.content!=='录音'">
												<video :src="v?.video?.url" style="width: 100%;height: 100%;"></video>
											</view>
										</view>
										<!-- 图片 -->
										<view v-if="item?.img?.length>0"
											style="width: 100%; display: flex;box-sizing: border-box;padding: 15rpx 42rpx 30rpx 25rpx;flex-wrap: wrap;">
											<view v-for="(v,i) in item?.img" :key="i" style="margin-right: 20rpx;">
												<img mode="aspectFit" :src="v?.img?.url" @click="clickImg(i, item?.img)"
													style="width: 120rpx;height: 120rpx; display: inline-block;" alt=""
													v-if=" v?.img?.url">
											</view>
										</view>
										<!-- 录音 -->
										<view v-for="(v,i) in item?.video" :key="i">
											<view class="list-bootom-bootmtwo" v-if="v?.video?.url && v?.content=='录音'">
												<view class="mide-content-audio">
													<view class="content-audio-body">
														<view class="content-audio"
															@click.stop="changepaly(v?.video?.url,v?.time,index,i)">
															<view class="content-audio-left">
																<view class="audio-left-hu">
																	<view class="left-hu-one"
																		:class="v?.swichaudio?'animations-audio':''">
																		<view class="left-hu-two">
																			<view class="left-hu-three"
																				:class="v?.swichaudio?'animations-audio-two':''">
																				<view class="left-hu-fore">
																					<view class="left-hu-five"
																						:class="v?.swichaudio?'animations-audio-three':''">
																					</view>
																				</view>
																			</view>
																		</view>
																	</view>
																</view>
																<span>{{v?.audiotitle}}</span>
															</view>
															<span class="content-audio-misc">{{v?.audiounm}}s</span>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view
										v-if="commentlistLindex!==index && (item?.video.length + item?.img.length>1) && checkCommentAuth(item)"
										style="position: absolute;width: 90%;bottom: 32px;text-align: center;margin-bottom:15px; color: #999999;font-size: 26rpx;font-weight: 400;">
										点击查看更多内容
									</view>



									<view class="comment-bottom">
										<view class="comment-bottom-left">
											<!-- 	<span
												v-if="commentlistLindex==index && ((item?.view?.view_status) || (item?.user?.id === userId))">{{ $utils.dateFormat(item.created_at,"yyyy-MM-dd hh:mm:ss") }}</span> -->
											<span>回答均分: {{item.avg_score}}</span>
										</view>
										<view class="comment-bottom-right">
											<view class="icon" @click.stop="changezan(index,item.id,item.visits)">
												<img :src="(item.visits?.is_like)?queryIconImage('questiondetalogo4cative'):queryIconImage('questiondetalogo4')"
													alt="" class="imgs-css">
												<span class="icon-text">{{item.zanlink}}</span>
											</view>

											<view class="icon" @click.stop="swithcommentpopular(item.id,index)">
												<img :src="queryIconImage('questiondetalogo5')" alt=""
													class="imgs-css1">
												<span class="icon-text">{{item?.article_comment?.length}}</span>
											</view>
											<view class="icon" @click.stop="changecollect(index,item.id,item.visits)">
												<u-icon v-if="!item.visits?.is_collect" name="star" color="#999999"
													size="21"></u-icon>
												<u-icon v-else name="star-fill" color="#F09500" size="21"></u-icon>
												<span class="icon-text">{{item.collect}}</span>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 点击回答 -->
		<view class="questiondetails-page-flex">
			<view class="page-flex-content" @click="showpupularanswer">
				<img :src="actionInfo.user?.avatar?.url" alt=""
					style="width: 50rpx;height: 50rpx;border-radius: 50rpx 50rpx 50rpx 50rpx;margin:0 20rpx;">
				<span>点击回答...</span>
			</view>
		</view>
		<commentPopular :commentshow="commentshow" :answerId="answerId" :querstval="querstval"
			@commentPoluaremit="commentPoluaremit" :articleId="articleId" :userimg="actionInfo.user?.avatar?.url">
		</commentPopular>

		<ordinaryComments :commentshow="commentshowOrdinary" :title="actionInfo.title" :querstval="querstval"
			:articleId="articleId" @commentPoluaremit="commentPoluaremit" :userimg="actionInfo.user?.avatar?.url">
		</ordinaryComments>

		<answerPopular :id="articleId" :invitedAnswerPopularBlean="publicPopularBlean"
			:firstAnswerInfo="firstAnswerInfo" :answer_type="actionInfo.answer_type" :articleTpye="actionInfo.type"
			:userId="actionInfo.user?.id" :showbtn="showbtn" @switchpopular="switchpopular" :title="actionInfo.title"
			:plugin='plugin'>
		</answerPopular>


		<u-popup :show="show" @close="close" @open="open" :round="10" mode="center" :safeAreaInsetBottom="false">
			<view class="popularindex">
				<img :src="queryIconImage('questiondetalogo7')" alt="" class="popularindex-logo">
				<span>发布成功</span>
				<view class="popularindex-text">
					<span>您的问题已发布成功，审核通过后在社区显示！</span>
				</view>
				<view class="popularindex-btn" @click="returnindex">
					<span>返回社区</span>
				</view>
			</view>
		</u-popup>
		<!-- 评分弹框 -->
		<uni-popup ref="ratepopup" :z-index="100" background-color="#fff" :mask-click="false">
			<view class="ratepopup-content">
				<img mode="aspectFit" :src="queryIconImage('fabujishu')" alt="" style="width: 76rpx;height: 76rpx;">
				<p class="ratepopup-content-title">{{ratetitle}}</p>
				<uni-rate size="30" @change.stop="ratechange" :value="rateval" allow-half color="#bbb"
					active-color="#F3D958" />
				<view class="popularindex-btn" @click="closerate">
					<span>返回社区</span>
				</view>
			</view>
		</uni-popup>
		<u-popup :safe-area-inset-bottom="false" mode="center" :round="20" :show="is_invited" :disabled="true">
			<view class="popularShow">
				<p class="popularShow-text">提示</p>
				<view class="popularShow-text-content">
					尊敬的受邀答主您好，解答该问题您将预计获得
					<span style="color:red">{{comment_price/100}}元</span>
					收益
				</view>
				<view class="popularShow-btn">
					<view class="popularShow-btn-show" @click="is_invited=false">
						<span>确认</span>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :safe-area-inset-bottom="false" mode="center" :round="20" :show="showUserInfo" :disabled="true">
			<!-- TODO -->
			<view class="userShow">
				<view class="userShow-top">
					<image :src="checkUserInfo?.avatar?.url" mode="" class="userShow-top-image"></image>
					<view class="userShow-top-right">
						<view class="userShow-top-right1">
							<view class="userShow-top-right1-title">{{checkUserInfo.nickname}}&nbsp;</view>
							<view class="userShow-top-right1-like">
								关注&nbsp;{{checkUserInfo?.user_interest?.length}}&nbsp;
							</view>
							<view class="userShow-top-right1-like">
								粉丝&nbsp;{{checkUserInfo?.user_fans?.length}}
							</view>
						</view>
						<view class="userShow-top-right2">
							<view class="userShow-top-right2-title">专业标签:&nbsp;</view>

							<view class="right-bttom-right">
								<span class="bttom-right-text" v-for="(item,index) in checkUserInfo.tag_list"
									:key="item">{{item.label}}</span>
							</view>

						</view>
					</view>
				</view>
				<view class="userShow_rate">
					<view class='userShow_rate_title'>
						回答均分:
					</view>
					<uni-rate allow-half :value="checkUserInfo.avg_score" :readonly="true" :size="20" />
					<view class='userShow_rate_text'>{{checkUserInfo.avg_score}}</view>
				</view>
				<view class="popularUser-btn">
					<view class="popularUser-btn-left" @click="goUserDetail">
						<span>查看更多</span>
					</view>
					<view class="popularUser-btn-left" style="background: #999999;" @click="cancelCheckUser">
						<span>取消</span>
					</view>
				</view>
				<!-- 	<view class="userShow-text">
					提示
				</view>
				<view class="userShow-text-content">
					尊敬的用户您好，您当前所查看的是答主为:
					<span style="color:#567895">{{checkUserInfo.nickname}}</span>
				</view>
				<view class="popularUser-btn">
					<view class="popularUser-btn-left" @click="goUserDetail">
						<span>查看更多</span>
					</view>
					<view class="popularUser-btn-left" style="background: #999999;" @click="cancelCheckUser">
						<span>取消</span>
					</view>
				</view> -->
			</view>
		</u-popup>

		<!-- <u-popup :safeAreaInsetBottom="false" mode="center" :round="20" :show="showLogin">
			<view class="popularlogin">
				<img :src="queryIconImage('weixinlogo1')" alt="" style="width: 60rpx;height: 60rpx;">
				<p class="popularlogin-text">登录后查看</p>
				<view class="popularlogin-btn">
					<view class="popularlogin-btn-left" @click="loginsubmit">
						<span>授权登录</span>
					</view>
					<view class="popularlogin-btn-left" style="background: #999999;" @click="cancellationbtn">
						<span>取消</span>
					</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 查看回答付费 -->
		<u-popup :z-index="10070" :safe-area-inset-bottom="false" mode="center" :round="20" :show="showthree"
			:close-on-click-overlay="false">
			<view class="popularlogin" style="padding-top: 100rpx;">
				<p class="popularlogin-text" style="margin-bottom: 90rpx;">支付{{hidebleanMoney+'.00元'}},查看回答</p>
				<view class="popularlogin-btn">
					<view class="popularlogin-btn-left" style="background: #999999;" @click="cancehideblean">
						<span>取消</span>
					</view>
					<view class="popularlogin-btn-left" @click="hidebleansudde">
						<span>确定</span>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 选择支付类型 -->
		<u-popup mode="bottom" :z-index="10080" :show="choosePay" :close-on-click-overlay="true"
			@close="choosePay = false">
			<u-cell-group>
				<u-cell @click="wxPay" icon="weixin-fill" icon-style="color: #26C789;font-size: 20px;" title="微信支付"
					title-style="color:#666666;font-size:14px"></u-cell>
				<u-cell @click="yePay" icon="red-packet-fill" icon-style="color: #e50f0f;font-size: 20px;" title="余额支付"
					title-style="color:#666666;font-size:14px"></u-cell>
			</u-cell-group>
		</u-popup>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex' //引入mapState
	import {
		Time
	} from "@/utils/timenew.js"
	export default {
		data() {
			return {
				followNumNull: false,
				flag: true,
				is_first: true,
				userInfoData: {},
				invited_user: [],
				is_invited: false,
				showUserInfo: false,
				hidebleanMoney: 0,
				showtwo: false,
				showthree: false,
				editBlean: false,
				valuename: '',
				count: 0,
				querstval: {},
				childeid: 0,
				id: 0,
				userid: 0,
				audiotitle: '点击播放',
				swichaudio: false,
				rateval: 0,
				ratetitle: '给此回答评分',
				commentshow: false,
				commentshowOrdinary: false,
				show: false,
				audiounm: 0,
				unm: 0,
				showbtn: false,

				commentlistLindex: null,

				title: '问题详情',
				bgColor: 'rgba(247, 247, 247, 0)',
				gps: '',
				backgrouncolor: '#f4f4f4',
				commentlistL: [],

				userId: null, //用户id
				articleId: null, //文章id
				actionInfo: {}, //文章详情
				answerInfo: [], //回答列表
				commentInfo: [], //评论列表
				answerId: null, //回答id
				scoreId: null, //评分id
				score: null, //分数
				stopClick: false,
				orderId: "", //订单id
				choosePay: false, //选择支付类型
				showLogin: false,
				plugin: {},
				comment_price: 0,
				checkUserInfo: {},
				invitedAnswerComment: [], //受邀答主的第一次回答

				buyCommentAnswerId: [], //用户购买评论后的答主id
				firstAnswerInfo: {} //答主的第一次回答信息，用来阻止答主每一次都需要设置付费和公开状态
			};
		},
		computed: {
			...mapState({
				user: state => state.user?.data ?? {},
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
			}),
		},
		created() {
			this.$store.dispatch("user/getUserByToken")
		},

		methods: {

			//判断是否关注过
			followNum(id) {
				console.log("111111111111111111111", id);
				let userId = uni.getStorageSync('userInfo').id
				this.$store.dispatch("remote/query", {
					model: "follow",
					limit: -1,
					where: {
						_and: [{
							user_user: {
								_eq: userId
							}
						}, {
							article_article: {
								_eq: id
							}

						}]
					},
					field_string: " user_user article_article status"
				}).then(res => {
					if (res.data != undefined) {
						this.followNumNull = true
					}
					// this.followNumList = res

					// console.log("this.followNumList",this.followNumList);
				})
			},
			//关注
			follow(id) {
				this.followNumNull = !this.followNumNull
				let userId = uni.getStorageSync('userInfo').id
				// console.log("id",id);
				this.$store.dispatch("remote/query", {
					model: "follow",
					limit: -1,
					where: {
						_and: [{
							user_user: {
								_eq: userId
							}
						}, {
							article_article: {
								_eq: id
							}

						}]
					}
				}).then(rs => {
					if (rs.data == undefined) {

						this.$store.dispatch("remote/mutation", {
							operation: "insert_follow",
							objects: [{
								user_user: userId,
								article_article: id,
								status: "已关注"
							}],
							field_string: " user_user article_article"
						}).then(res => {

							uni.showToast({
								title: "已关注",
								icon: "none",
								duration: 2000
							})
						})

					} else {

						this.$store.dispatch("remote/mutation", {
							operation: "delete_follow",
							where: {
								_and: [{
									user_user: {
										_eq: userId
									}
								}, {
									article_article: {
										_eq: id
									}

								}]
							}
						}).then(r => {

							uni.showToast({
								title: "已取消关注",
								icon: "none",
								duration: 2000
							})
						})
					}
				})

			},
			//答主跳过

			answerBtn() {

				this.commentshowOrdinary = this.commentshowOrdinary ? false : true

			},

			//校验是否可以需要付费查看评论
			checkCommentAuth(item) {
				// console.log(item)
				let isArticleUser = false
				let isBuy = false
				//提问者查看答主的所有回答
				if (this.actionInfo.user.id == this.userId) {
					//第一种情况：提问者只可以看到受邀答主的第一次回答
					// isArticleUser = this.invitedAnswerComment.filter(rs => rs.id == item.id).length == 1
					//第二种情况：只要是受邀答主的评论，提问者都可以看到
					isArticleUser = this.actionInfo.article_answer.filter(rs => rs.user_user == item.user.id).length == 1
				}

				//校验是否是已经购买过的评论的答主追加回答
				this.buyCommentAnswerId.map(res => {
					if (res == item.user.id) {
						isBuy = true
					}
				})
				return (item?.view?.view_status) || (item?.user?.id === this.userId) || item.ud_ispay_ff5175 == false ||
					isArticleUser ||
					isBuy
			},

			//获取用户购买的评论信息
			getUserByCommentInfo() {
				//购买者可以看到当前用户的所有回答
				this.$store.dispatch('remote/query', {
					model: 'reward_article_view',
					field_string: `id article_article article_comment_article_comment release_article_comment_user status user_user`,
					where: {
						status: {
							_eq: "已发放"
						},
						article_article: {
							_eq: this.actionInfo.id
						},
						user_user: {
							_eq: this.userId
						}
					}
				}).then(res => {
					let newBuyList = res.data_list.slice(0)
					if (newBuyList.length != 0) {
						newBuyList.map(item => {
							this.buyCommentAnswerId.push(item.release_article_comment_user)
						})

					}

					console.log("获取用户购买的评论信息", this.buyCommentAnswerId);
				})
			},


			//检查是否为第一次回答
			getOnceAnswer() {
				let newAnswerInfo = this.answerInfo.slice(0)
				newAnswerInfo.sort(function(a, b) {
					return a.id - b.id
				})
				let arr = newAnswerInfo.filter(
					(obj, index) =>
					newAnswerInfo.findIndex((item) => item.user.id === obj.user.id) === index
				)
				console.log("arr", arr);
				const article_answer = this.actionInfo.article_answer.map(item => item.user_user);
				arr = arr.filter(item => article_answer.includes(item.user.id))
				this.invitedAnswerComment = arr
			},

			//获取答主的第一次回答
			getMyOnceComment() {
				if (this.user.is_answer == '已通过') {
					let newAnswerInfo = this.answerInfo.slice(0)
					newAnswerInfo.sort(function(a, b) {
						return a.id - b.id
					})
					let arr = newAnswerInfo.filter(
						(obj, index) =>
						newAnswerInfo.findIndex((item) => item.user.id === obj.user.id) === index
					)
					arr = arr.filter(item => item.user.id == this.userId)
					this.firstAnswerInfo = arr[0]

				}




			},


			//检查是否为受邀答主
			checkInvitedAnswerOnce() {
				// let blean = this.invitedAnswerComment.filter(rs => rs.id == item.id).length == 1
				//过滤出受邀答主的userId
				const article_invited_answer_list = this.actionInfo.article_answer.map(item => item.user_user);
				console.log("article_invited_answer_list", article_invited_answer_list);
				//判断当前登录用户是不是该提问的受邀用户
				let blean = (article_invited_answer_list.filter(rs => rs == this.userId).length == 1)
				console.log(blean);
				// //如果是受邀答主
				// if (!blean) {

				// 	let invitedAnswerCommentCount = this.answerInfo.filter(res => res.user.id == this.userId).length
				// 	if (invitedAnswerCommentCount == 0) {
				// 		blean = false
				// 	} else {
				// 		blean = true
				// 	}


				// 	//判断当前提问下的回答是否存在受邀答主的回答，存在为True,不存在为false
				// }

				//是受邀答主
				this.publicPopularBlean = blean

				// console.log("checkInvitedAnswerOnce", this.publicPopularBlean);
				// this.answerInfo.filter(rs => rs.user.id == )
				// console.log("checkInvitedAnswerOnce", blean);
			},

			//去用户首页
			goUserDetail() {
				uni.navigateTo({
					url: '/pages_a/answerdetails/answerdetails?id=' + this.checkUserInfo.id
				})
				this.checkUserInfo = {}
			},
			//取消
			cancelCheckUser() {
				this.checkUserInfo = {}
				this.showUserInfo = false
			},
			//点击图片
			clickInvitedUser(item) {
				this.checkUserInfo = item
				this.showUserInfo = true
				console.log("点击了", item);
			},
			initChatbot() {
				console.log("初始化-----");
				let md_userInfo = {}
				md_userInfo = uni.getStorageSync('userInfo')
				console.log('拿到用户信息', md_userInfo == {} ? 'oWj3G5dJAbC-jUfiyUmXyFLqIIk8' : md_userInfo
					.wx_mini_openid);
				this.plugin = requirePlugin("chatbot");
				console.log(this.plugin);
				this.plugin.init({
					appid: "H4USdd5OjHDg76W3I6YsZp1Pv2Ua14", //小程序示例账户，仅供学习和参考
					openid: md_userInfo == {} ? 'oWj3G5dJAbC-jUfiyUmXyFLqIIk8' : md_userInfo
						.wx_mini_openid, //用户的openid，非必填，建议传递该参数
					success: () => {
						console.log("插件初始化成功");
					}, //非必填
					fail: (error) => {
						console.log("插件初始化失败");
					}, //非必填
				});

			},
			queryImage(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			//获取文章详情
			getArticleInfo(id) {
				this.$store.dispatch('remote/callActionflowOffset', {
					response_key: "actionInfo",
					key: "list",
					actionflow_name: "文章_评论查询",
					payload: {
						articleId: id, //文章id
						operate: "0",
					},
				}).then(res => {
					let info = JSON.parse(JSON.stringify(res.data))
					if (info.price_cny) {
						info.price_cny = info.price_cny / 100
					}
					this.actionInfo = info
					console.log('文章详情', this.actionInfo);
					this.checkInvitedAnswerOnce()
					this.getUserByCommentInfo()
					this.getArticleHeat(this.articleId, this.userId)
					if (this.actionInfo.type == '悬赏提问' && this.is_first == true) {
						this.is_first = false
						this.getUserStatus(this.articleId)
					}
				})
			},
			//获取答主回答详情
			getAnswerInfo(id) {
				this.$store.dispatch('remote/callActionflowOffset', {
					response_key: "answerInfo",
					key: "list",
					isOffset: false,
					actionflow_name: "文章_评论查询",
					payload: {
						articleId: id, //文章id
						operate: "1",
					},
					isloading: false
				}).then(res => {
					this.answerInfo = JSON.parse(JSON.stringify(res.data_list))
					this.answerInfo.forEach(item => {
						item.video?.forEach(eitem => {
							if (eitem.content == '录音') {
								eitem.src = eitem.video?.url
								eitem.audiounm = eitem?.time
								eitem.unm = eitem?.time
								eitem.swichaudio = false
								eitem.audiotitle = '点击播放'
							}
						})
					})
					console.log('回答详情', this.answerInfo)
					this.getMyOnceComment()
					// this.getOnceAnswer()

				})
			},


			//放大查看图片
			clickImg(index, img) {
				let imgs = img.map(item => {
					if (item.img) {
						return item.img.url
					} else {
						return item.url
					}
				})
				// console.log('111111111',imgs)
				uni.previewImage({
					urls: imgs,
					current: index,
				})
			},
			//付费查看回答
			showhideblean(articleCommentId) {
				this.articleCommentId = articleCommentId
				this.showthree = true
				this.hidebleanMoney = this.actionInfo.price_cny / 10
				console.log("付费查看回答", articleCommentId)
			},
			//取消支付
			cancehideblean() {
				this.showthree = false
			},
			//确定支付
			hidebleansudde() {
				this.choosePay = true
			},

			//微信支付
			wxPay() {
				if (this.stopClick) {
					return;
				};
				this.stopClick = true;
				this.timer = setTimeout(() => {
					this.stopClick = false;
				}, 2000);

				console.log(this.articleId, this.articleCommentId, this.order_id, this.hidebleanMoney * 100)
				this.$store.dispatch("app/runActionflowmain", {
					args: {
						actionflow_name: "订单_答主回答查看订单",
						payload: {
							articleId: this.articleId, //查看的文章id
							articleCommentId: this.articleCommentId, //查看的答主回答id
							orderId: this.order_id, //订单id，主要是用来重新支付的
							price: this.hidebleanMoney * 100, //人民币:分  用来核对支付金额
							type: 1, //支付方式  1:微信支付   2:余额支付
							content: "", //流程描述
							description: "", //微信支付的支付备注
						}
					}
				}).then(res => {
					console.log(res);
					if (res.status == '成功') {
						uni.requestPayment({
							timeStamp: res.data.payResult.timeStamp, //当前的时间
							nonceStr: res.data.payResult.nonceStr, //随机字符串
							package: res.data.payResult.package, //统一下单接口返回的 prepay_id 参数值
							signType: res.data.payResult.signType, //签名算法，暂支持 MD5。
							paySign: res.data.payResult.paySign, //签名
							success: res => {
								console.log('成功', res)
								this.choosePay = false
								this.showthree = false
								this.getAnswerInfo(this.articleId)

								let index = this.answerInfo.findIndex(rs => rs.id == this
									.articleCommentId)
								this.changecollect(index, this.answerInfo[index].id, this.answerInfo[
										index].visits
									.is_collect)
								let userId = uni.getStorageSync('userInfo').id
								this.$store.dispatch("remote/mutation", {
									operation: "insert_follow",
									objects: [{
										user_user: userId,
										article_article: this.articleId,
										status: "已关注"
									}],
									field_string: " user_user article_article"
								}).then(res => {
									this.followNumNull = true
									uni.showToast({
										title: "已为您自动关注该提问和收藏该回答",
										icon: "none",
										duration: 2000
									})
								})


							},
							fail: err => {
								console.log('失败', err)
								this.orderId = res.data.orderInfo.order_id
								// this.hidebleansudde()
							},
						})

					}
				})
			},
			//余额支付
			yePay() {
				if (this.stopClick) {
					return;
				};
				this.stopClick = true;
				this.timer = setTimeout(() => {
					this.stopClick = false;
				}, 2000);

				this.choosePay = false
				this.showthree = false

				this.$store.dispatch("remote/callActionflowOffset", {

					isOffset: false,
					actionflow_name: "订单_答主回答查看订单",
					payload: {
						articleId: this.articleId, //查看的文章id
						articleCommentId: this.articleCommentId, //查看的答主回答id
						orderId: this.order_id, //订单id，主要是用来重新支付的
						price: this.hidebleanMoney * 100, //人民币:分  用来核对支付金额
						type: 2, //支付方式  1:微信支付   2:余额支付
						content: "", //流程描述
						description: "", //微信支付的支付备注
					}

				}).then(res => {
					console.log(res);
					if (res.raw_data.status == '成功') {
						this.choosePay = false
						this.showthree = false
						this.getAnswerInfo(this.articleId)

						let index = this.answerInfo.findIndex(rs => rs.id == this
							.articleCommentId)
						this.changecollect(index, this.answerInfo[index].id, this
							.answerInfo[index].visits
							.is_collect)

						let userId = uni.getStorageSync('userInfo').id
						this.$store.dispatch("remote/mutation", {
							operation: "insert_follow",
							objects: [{
								user_user: userId,
								article_article: this.articleId,
								status: "已关注"
							}],
							field_string: " user_user article_article"
						}).then(res => {
							this.followNumNull = true
							uni.showToast({
								title: "已为您自动关注该提问和收藏该回答",
								icon: "none",
								duration: 2000
							})
						})
					}
				})
			},
			// loginsubmit() {
			// 	uni.navigateTo({
			// 		url: `/pages/login/login`
			// 	})

			// },
			// cancellationbtn() {
			// 	uni.switchTab({
			// 		url: '/pages/index/index'
			// 	})
			// },
			startmethod(e) {

			},
			changepaly(urlpath, times, index, i) {
				console.log(urlpath, times, index, i)
				console.log(this.answerInfo[index].video[i])
				let audio = uni.createInnerAudioContext()
				audio.obeyMuteSwitch = false
				this.answerInfo[index].video[i].swichaudio = !this.answerInfo[
					index].video[i].swichaudio
				let time = null
				if (this.answerInfo[index].video[i].swichaudio) {
					console.log(encodeURI(urlpath));
					audio.src = encodeURI(urlpath);
					audio.stop()
					audio.play()

					// // 解决IOS无法播放音频问题
					// var music = wx.setInnerAudioOption({
					// 	obeyMuteSwitch: false,
					// 	success: function(res) {
					// 		console.log("开启静音模式下播放音乐的功能");
					// 	},
					// 	fail: function(err) {
					// 		console.log("静音设置失败");
					// 	},
					// });

					console.log("audio.src", audio)
					this.answerInfo[index].video[i].audiotitle = "正在播放..."
					time = setInterval(() => {
						this.answerInfo[index].video[i].audiounm = this
							.answerInfo[index].video[i].audiounm - 1
						if (this.answerInfo[index].video[i].audiounm <
							0) {
							audio.stop()
							clearInterval(time)
							this.answerInfo[index].video[i]
								.audiotitle = '点击播放'
							this.answerInfo[index].video[i]
								.swichaudio = false
							this.answerInfo[index].video[i].audiounm =
								this.answerInfo[index].video[i].unm
							audio.destroy()
						}
						if (!this.answerInfo[index].video[i]
							.swichaudio) {
							audio.stop()
							clearInterval(time)
							this.answerInfo[index].video[i].audiounm =
								this.answerInfo[index].video[i].unm
							audio.destroy()
						}
					}, 1000)
				} else {
					audio.stop()
					this.answerInfo[index].video[i].audiotitle = '点击播放'
					this.answerInfo[index].video[i].audiounm = this.answerInfo[
						index].video[i].unm
					audio.destroy()
				}

			},
			commentPoluaremit(val) {
				this.commentshow = val
			},
			//评分
			ratechange(e) {
				/* 评论改变时表示评论成功 */
				if (e.value) {
					this.ratetitle = `评分成功:  ${e.value}分`
					this.rateval = e.value
				}
			},
			/* 评分tankuang */
			popularrate(id, score) {
				this.scoreId = id
				this.score = score
				if (score) {
					this.ratetitle = `评分成功:  ${score}分`
					this.rateval = score
				}
				this.$refs.ratepopup.open('center')
			},
			/* 关闭评论弹出框 */
			closerate() {
				if (this.score != this.rateval) {
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 8, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   8.评分
								articleId: this.articleId, //文章id
								articleCommentId: this
									.scoreId, //答主评论id
								content: this.rateval
							},
						},
					}).then(res => {
						this.getAnswerInfo(this.articleId)
						this.queryArticleHeatAndUpdate(true)
					})
				}
				this.ratetitle = '给此回答评分'
				this.$refs.ratepopup.close()
				this.rateval = 0
			},
			expand(index, video) {

				if (this.commentlistLindex === index) {
					this.commentlistLindex = null
				} else {
					this.commentlistLindex = index
				}
			},
			//点赞
			changezan(index, id, like) {
				if (like.is_like) {
					//取消
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 5, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
						},
					}).then(res => {
						this.getAnswerInfo(this.articleId)
						this.queryArticleHeatAndUpdate(false)
					})

				} else {
					//点赞
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 4, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
						},
					}).then(res => {
						this.getAnswerInfo(this.articleId)
						this.queryArticleHeatAndUpdate(true)
					})
				}
			},
			//判断是否需要出现弹窗提示
			async getUserStatus(articleId) {
				this.$store.dispatch('remote/query', {
					model: 'article_answer',
					field_string: `id user_user user{id nickname avatar{url} tag_list article_comment_score{id score} user_fans{id user_user user_fans_user} user_interest{id user_user user_fans_user}} status type price article_article`,
					where: {
						article_article: {
							_eq: articleId
						},
						type: {
							_eq: "指定答主"
						}
					}
				}).then(res => {
					for (let i = 0; i < res.data_list
						.length; i++) {
						if (res.data_list[i].user_user == this
							.userId && res.data_list[i].status ==
							'待回答') {
							this.comment_price = res.data_list[i]
								.price
							this.is_invited = true
						}
						let countScore = 0,
							avg_score = 0
						for (let j in res.data_list[i].user
								.article_comment_score) {
							countScore += res.data_list[i].user
								.article_comment_score[j].score
						}
						if (res.data_list[i].user
							.article_comment_score.length != 0) {
							avg_score = (countScore / res
									.data_list[i].user
									.article_comment_score.length)
								.toFixed(2)
						}

						let flag = true
						if (this.invited_user.length == 0) {

							this.invited_user.push({
								id: res.data_list[i].user
									.id,
								avatar: res.data_list[i]
									.user.avatar,
								nickname: res.data_list[i]
									.user.nickname,
								user_interest: res
									.data_list[i].user
									.user_interest,
								user_fans: res.data_list[i]
									.user.user_fans,
								avg_score: avg_score,
								tag_list: JSON.parse(res
									.data_list[i].user
									.tag_list)

							})
							flag = false
						} else {
							for (let j in this.invited_user) {
								if (this.invited_user[j].id == res
									.data_list[i].user.id) {
									flag = false
								}
							}
						}
						if (flag) {
							this.invited_user.push({
								id: res.data_list[i].user
									.id,
								avatar: res.data_list[i]
									.user.avatar,
								nickname: res.data_list[i]
									.user.nickname,
								user_interest: res
									.data_list[i].user
									.user_interest,
								user_fans: res.data_list[i]
									.user.user_fans,
								avg_score: avg_score,
								tag_list: JSON.parse(res
									.data_list[i].user
									.tag_list)
							})
						}




						// this.$store.dispatch('remote/query', {
						// 	model: 'user',
						// 	field_string: `id nickname avatar{url} tag_list article_comment_score{id score} user_fans{id user_user user_fans_user} user_interest{id user_user user_fans_user}`,

						// 	where: {
						// 		id: {
						// 			_eq: res.data_list[i].user_user
						// 		}
						// 	}
						// }).then(ret => {
						// 	let count_score = 0,
						// 		count = 0
						// 	for (let i = 0; i < ret.data.article_comment_score.length; i++) {
						// 		count_score = count_score + ret.data.article_comment_score[i].score
						// 		count = count + 1
						// 	}
						// 	if (count_score != 0) {
						// 		ret.data.avg_score = (count_score / count).toFixed(2)
						// 	} else {
						// 		ret.data.avg_score = 0
						// 	}

						// 	ret.data.tag_list = JSON.parse(ret.data.tag_list)
						// 	// this.invited_user.push(ret.data)
						// 	for (let i in ret.data_list) {
						// 		let flag = true
						// 		if (this.invited_user.length == 0) {
						// 			console.log("新增111111111", ret.data_list[i]);
						// 			this.invited_user.push(ret.data)
						// 			flag = false
						// 		} else {
						// 			for (let j in this.invited_user) {
						// 				if (this.invited_user[j].id == ret.data_list[i].id) {
						// 					flag = false
						// 				}
						// 			}
						// 		}
						// 		if (flag) {
						// 			this.invited_user.push(ret.data)
						// 		}
						// 	}
						// })
					}
					// if (res.data != undefined && res.data.status == '待回答') {
					// 	this.comment_price = res.data.price
					// 	this.is_invited = true

					// }
					console.log(
						'-----------------------------------------------------------',
						this
						.invited_user);
				})
			},
			//收藏
			changecollect(index, id, collect) {
				if (collect.is_collect) {
					//取消
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 7, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
							isloading: false,
						},
					}).then(res => {
						this.getAnswerInfo(this.articleId)
						this.queryArticleHeatAndUpdate(false)
					})

				} else {
					//收藏
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 6, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
							isloading: false,
						},
					}).then(res => {
						this.getAnswerInfo(this.articleId)
						this.queryArticleHeatAndUpdate(true)
					})
				}
			},
			//评论
			swithcommentpopular(id, index) {
				console.log("444444", id, index)
				this.querstval = this.answerInfo[index]
				console.log("666666666666666666666666666666", this
					.querstval.id);
				this.answerId = id
				this.commentshow = this.commentshow ? false : true
			},
			returnindex() {
				this.show = false
			},
			switchpopular() {
				this.getArticleInfo(this.articleId)
				this.getAnswerInfo(this.articleId)
				this.show = true
			},
			close() {
				this.show = false
			},
			open() {

			},
			showpupularanswer() {
				console.log('用户信息', this.user)
				//判断用户是否为答主
				if (this.user.is_answer == '已通过') {
					this.showbtn = this.showbtn ? false : true

				} else {
					uni.showToast({
						icon: 'none',
						title: '你还不是答主'
					})
				}
			},
			loginsubmit() {
				uni.redirectTo({
					url: `/pages/login/login?url=${'/pages_a/questiondetails/questiondetails'}`
				})
				this.show = false
			},
			cancellationbtn() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			//判断是用户是否是第一次进入该帖子
			getArticleHeat(articleId, userId) {
				this.$store.dispatch('remote/query', {
					model: 'article_heat',
					where: {
						user_user: {
							_eq: userId
						},
						article_article: {
							_eq: articleId
						}
					},
					field_string: 'id user_user count article_article'
				}).then(res => {
					if (res.count == 0) {
						this.addArticleHeat(articleId, userId)
					} else {
						if (this.is_first = true) {
							this.updateArticleHeat(res.data)
						}
					}
				})
			},
			//增加浏览记录
			addArticleHeat(articleId, userId) {
				this.$store.dispatch('remote/mutation', {
					operation: 'insert_article_heat',
					objects: [{
						user_user: userId,
						article_article: articleId,
						count: 1
					}]
				}).then(res => {
					this.$store.dispatch('remote/mutation', {
						operation: 'update_article',
						where: {
							id: {
								_eq: this.actionInfo.id
							}
						},
						_set: {
							heat: this.actionInfo.heat + 1
						}
					})
				})
			},

			//查询，判断是加减热度
			queryArticleHeatAndUpdate(type) {
				this.$store.dispatch('remote/query', {
					model: 'article',
					where: {
						id: {
							_eq: this.articleId
						}
					},
					field_string: `id user_user heat`,
					isloading: false,
				}).then(res => {

					if (type == true) {
						this.$store.dispatch("remote/mutation", {
							operation: 'update_article',
							where: {
								id: {
									_eq: this.actionInfo.id
								}
							},
							_set: {
								heat: res.data.heat + 1
							},
							isloading: false,
						})
					} else {
						this.$store.dispatch("remote/mutation", {
							operation: 'update_article',
							where: {
								id: {
									_eq: this.actionInfo.id
								}
							},
							_set: {
								heat: res.data.heat - 1
							}
						})
					}
				})
			},
			//修改浏览次数
			updateArticleHeat(data) {
				let count = data.count + 1
				this.$store.dispatch('remote/mutation', {
					operation: 'update_article_heat',
					where: {
						user_user: {
							_eq: data.user_user
						},
						article_article: {
							_eq: data.article_article
						}
					},
					_set: {
						count: count
					}
				})
			}
		},
		onLoad: function(option) {

			this.initChatbot()
			this.articleId = option.id
			this.userId = uni.getStorageSync('userInfo').id


			this.getArticleInfo(this.articleId)
			this.getAnswerInfo(this.articleId)

			this.followNum(this.articleId)
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			console.log("胶囊位置信息", arr);
			//判断是否登录
			if (!uni.getStorageSync('userInfo').id) {
				this.showLogin = true
			}
			//#endif
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.questiondetails-page {
		width: 100%;
		height: 100vh;
		background-color: #f4f4f4;
		box-sizing: border-box;
		padding-bottom: 160rpx;
		overflow: hidden;

		// overflow-y: auto;
		.popularlogin {
			width: 595rpx;
			height: 370rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx 0 40rpx 0;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.popularlogin-text {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.8);
				line-height: 40rpx;
				margin: 12rpx 0 128rpx 0
			}

			.popularlogin-btn {
				display: flex;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
				padding: 0 65rpx;

				.popularlogin-btn-left {
					width: 215rpx;
					height: 70rpx;
					background: #26C789;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #FFFFFF;
					line-height: 70rpx;
				}
			}
		}

		.userShow {
			width: 595rpx;
			height: 370rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx 0 40rpx 0;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.userShow-top {
				display: flex;
				align-items: center;
				width: 95%;

				.userShow-top-image {
					width: 120rpx;
					height: 120rpx;
					border: 1rpx solid #CCCCCC;
					border-radius: 50%;
					overflow: hidden;
				}

				.userShow-top-right {
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 10rpx;

					.userShow-top-right1 {
						display: flex;
						// justify-content: space-around;
						align-items: center;

						.userShow-top-right1-title {
							font-size: 28rpx;
							font-family: Source Han Sans CN-Bold, Source Han Sans CN;
							font-weight: 700;
							color: #3D3D3D;
							line-height: 42rpx;
							max-width: 220rpx;

						}

						.userShow-top-right1-like {
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #999999;
							line-height: 35rpx;
							margin-left: 10rpx;
						}
					}

					.userShow-top-right2 {
						margin-top: 8rpx;
						display: flex;

						.userShow-top-right2-title {
							margin-top: 10rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #999999;
							line-height: 35rpx;
						}

						.right-bttom-right {

							flex: 1;
							box-sizing: border-box;

							.bttom-right-text {
								font-size: 28rpx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #F09500;
								line-height: 35rpx;
								border-bottom: 2rpx solid #F09500;
								margin-right: 10rpx;
							}

							.bttom-right-text:last-child {
								margin-right: 0;
							}
						}
					}

				}
			}

			.userShow_rate {
				margin-top: 20px;
				width: 95%;
				display: flex;
				align-items: center;

				.userShow_rate_title {

					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #999999;
					line-height: 35rpx;


				}

				.userShow_rate_text {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					margin-left: 5px;
					line-height: 35rpx;
					margin-right: 25rpx;
				}
			}

			.userShow-text {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.8);
				line-height: 40rpx;
				margin: 12rpx;
			}

			.userShow-text-content {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				margin: 15px;
			}

			.popularUser-btn {
				display: flex;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
				padding: 20px 65rpx;

				.popularUser-btn-left {
					width: 215rpx;
					height: 70rpx;
					background: #26C789;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #FFFFFF;
					line-height: 70rpx;
				}
			}
		}

		// overflow-y: auto;
		.popularShow {
			width: 595rpx;
			height: 370rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx 0 40rpx 0;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.popularShow-text {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.8);
				line-height: 40rpx;
				margin: 12rpx;
			}

			.popularShow-text-content {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				margin: 15px;
			}

			.popularShow-btn {
				display: flex;
				justify-content: center;
				width: 100%;
				box-sizing: border-box;
				padding: 20px 65rpx;

				.popularShow-btn-show {
					width: 215rpx;
					height: 70rpx;
					background: #26C789;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #FFFFFF;
					line-height: 70rpx;
				}
			}
		}


		.u-popup__content.data-v-05c24e9b {
			border-radius: 15rpx !important;
		}



		/* 评分弹框 */
		.ratepopup-content {
			width: 595rpx;
			height: 370rpx;
			background: #FFFFFF;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			box-sizing: border-box;
			padding: 20rpx 0 40rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.ratepopup-content-title {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
				line-height: 40rpx;
				margin-top: 12rpx;
				margin-bottom: 15rpx;
			}

			.popularindex-btn {
				width: 215rpx;
				height: 70rpx;
				background: #F09500;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #FFFFFF;
				line-height: 70rpx;
				margin-top: 50rpx;
			}
		}

		.popularindex {
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.8);
			line-height: 40rpx;
			width: 595rpx;
			height: 370rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 24rpx 0 40rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.popularindex-logo {
				width: 51rpx;
				height: 52rpx;
				margin-bottom: 16rpx;
			}

			.popularindex-text {
				width: 100%;
				padding-left: 55rpx;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #666666;
				line-height: 40rpx;
				margin-top: 36rpx;
				margin-bottom: 52rpx;
				box-sizing: border-box;
			}

			.popularindex-btn {
				width: 215rpx;
				height: 70rpx;
				background: #F09500;
				border-radius: 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #FFFFFF;
				line-height: 70rpx;
			}

		}


		.questiondetails-page-header {
			width: 100%;
			/* #ifdef MP-WEIXIN */
			height: 343rpx;
			/* #endif */
			/* #ifdef H5 */
			height: 260rpx;
			/* #endif */
		}

		.questiondetails-content {
			padding: 0 0 40rpx 0;
			box-sizing: border-box;
			z-index: -111;
			width: 100%;
			height: 100%;
			background-color: #f4f4f4;
			margin-top: -170rpx;
			height: 90%;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			overflow-y: auto;


			.questiondetails-content-top {
				padding: 0 27rpx;
				box-sizing: border-box;
				width: 100%;

				.content-top-body {
					width: 100%;
					border-bottom: 2rpx solid #ccc;
					display: flex;
					flex-direction: column;

					.content-top-title {
						display: flex;
						font-size: 36rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: 700;
						color: #5F5F5F;
						line-height: 42rpx;
						align-items: flex-start;
						margin-bottom: 20rpx;

						.title-text {
							max-width: 90%;
						}

						.top-title-img {
							width: 32rpx;
							height: 32rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							margin-left: 15rpx;
							margin-top: 7rpx;
						}
					}

					.content-top-text {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						margin-bottom: 20rpx;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						line-height: 42rpx;
					}

					.content-top-bottom {
						display: flex;
						justify-content: space-between;
						width: 100%;
						margin-bottom: 20rpx;
						align-items: center;

						.top-bottom-right {

							font-size: 21rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							line-height: 45rpx;
						}

						.answerBtnCss2 {
							/* 矩形 11 */


							width: 17vw;
							height: 3.5vh;
							border-radius: 10px;
							opacity: 1;
							margin-left: 16rpx;
							text-align: center;
							font-size: 21rpx;
							color: #FFFFFF;
							line-height: 3.5vh;
							background: #F09500;

						}

						.top-bottom-left {
							display: flex;
							font-size: 20rpx;
							align-items: center;
							font-family: Source Han Sans CN-Bold, Source Han Sans CN;
							font-weight: 700;
							color: #9E9E9E;
							line-height: 42rpx;

							.bottom-left-name {

								display: inline-block;
								font-size: 26rpx;
								font-family: Source Han Sans CN-Bold, Source Han Sans CN;
								font-weight: 700;
								color: #567895;
								line-height: 42rpx;
								margin: 0 6rpx 0 12rpx;
								max-width: 250rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.bottom-left-reward {
								font-size: 24rpx;
								font-family: Source Han Sans CN-Bold, Source Han Sans CN;
								font-weight: 700;
								color: #F09500;
								line-height: 45rpx;
								margin-left: 8rpx;
							}
						}
					}

					.content-top-userInfo {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						margin-bottom: 20rpx;

						.answerCss {
							width: 21vw;
							font-size: 29rpx;
						}

						.answerBtnCss {
							/* 矩形 11 */


							width: 40vw;
							height: 4vh;
							border-radius: 10px;
							opacity: 1;
							text-align: center;
							font-size: 30rpx;
							color: #FFFFFF;
							line-height: 4vh;
							background: #F09500;

						}

						.content-top-userInfo-top {
							width: 100%;
							height: auto;
							position: relative;
							display: flex;
							flex-direction: columnl;
							justify-content: flex-start;
							padding: 0 10rpx;
							box-sizing: border-box;

							.content-top-userInfo-topImg {
								display: inline-block;
								width: 60rpx;
								height: 60rpx;
								border-style: solid;
								font-weight: bold;
								border-width: 1rpx;
								border-color: white;
								border-radius: 50%;
							}
						}
					}
				}


			}

			.questiondetails-content-comment {
				width: 100%;
				margin-top: 20rpx;

				// overflow: hidden;
				overflow: hidden;
				overflow-y: auto;
				display: flex;
				flex-direction: column;
				align-items: center;

				.content-comment-header {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 0 27rpx;
					box-sizing: border-box;

					.comment-header-left {
						font-size: 28rpx;
						font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
						font-weight: 400;
						color: #999999;
						line-height: 42rpx;
					}

					.comment-header-right {
						display: flex;
						align-items: center;

						.content-bottom-rightbtn {
							width: 39rpx;
							height: 38rpx;
							outline: none;
							box-shadow: none;
							border: none;
							padding: 0;
							margin: 0;
							background-color: rgba(0, 0, 0, 0);
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.content-bottom-rightbtn::after {
							border: none;
						}
					}
				}

				.content-comment-body {
					width: 100%;


					.comment-body-list {
						width: 100%;
						padding: 0 27rpx;
						padding-bottom: 40rpx;
						box-sizing: border-box;
						margin-top: 20rpx;
						z-index: 0;

						.body-list-body {
							width: 100%;
							min-height: 400rpx;
							position: relative;
							overflow: hidden;


							.body-list-top {
								width: 60rpx;
								height: 60rpx;
								margin-left: 40rpx;
								// z-index: 999;

								.list-tops {
									width: 0;
									height: 0;
									border-color: #fff transparent;
									/*上下颜色 左右颜色*/
									border-width: 0 60rpx 60rpx 0;
									border-style: solid;

								}

							}

							.body-list-bootomindex {
								width: 100%;
								background-color: #fff;
								min-height: 400rpx;
								border-radius: 15rpx 15rpx 15rpx 15rpx;
								position: relative;

								.list-bootom-top {
									width: 100%;
									box-sizing: border-box;
									padding: 25rpx 42rpx 0 25rpx;
									margin-bottom: 15rpx;

									.bootom-top-left {
										display: flex;
										align-items: center;

										.bottom-left-name {
											font-size: 26rpx;
											font-family: Source Han Sans CN-Bold, Source Han Sans CN;
											font-weight: 700;
											color: #567895;
											line-height: 42rpx;
											margin-left: 12rpx;
											max-width: 320rpx;
											overflow: hidden;
											white-space: nowrap;
											text-overflow: ellipsis;
										}
									}

									.bootom-top-right {
										font-size: 24rpx;
										font-family: Source Han Sans CN-Regular, Source Han Sans CN;
										font-weight: 400;
										color: #999999;
										line-height: 45rpx;
										position: absolute;

										right: 40rpx;
									}

									.bootom-top-btn {
										width: 140rpx;
										height: 70rpx;
										background: #F09500;
										border-radius: 50rpx 50rpx 50rpx 50rpx;
										text-align: center;
										font-size: 28rpx;
										font-family: Source Han Sans CN-Bold, Source Han Sans CN;
										font-weight: 700;
										color: #FFFFFF;
										line-height: 70rpx;
										position: absolute;
										right: 40rpx;
										top: 25rpx;
									}
								}

								.hideblean {
									width: 100%;
									height: calc(100% - 100rpx);
									// background-color: red;
									background-color: transparent;
									position: absolute;

									z-index: 11;

									// display: inline-block;
									// white-space: nowrap;
									// width: 100%;
									// overflow: hidden;
									// text-overflow: ellipsis;
								}

								.container {
									min-height: 240rpx;

									.list-bootom-content {
										word-break: break-all;
										width: 100%;
										box-sizing: border-box;
										padding: 20rpx 30rpx 0 10rpx;
										font-size: 30rpx;
										font-family: Source Han Sans CN-Regular, Source Han Sans CN;
										font-weight: 400;
										color: #000000;
										line-height: 42rpx;
										margin-bottom: 30rpx;
										margin-top: 20rpx;
									}

									.list-bootom-bootm {
										box-sizing: border-box;
										padding: 25rpx 42rpx 30rpx 25rpx;
										width: 100%;
										height: 435rpx;
									}

									.list-bootom-bootmtwo {
										width: 100%;
										box-sizing: border-box;
										// padding: 25rpx 42rpx 30rpx 25rpx;

										.mide-content-audio {
											width: 100%;
											text-align: left;
											height: 100rpx;
											margin: 10rpx 0;

											// position: relative;
											.content-audio-body {
												width: 100%;
												text-align: left;
												position: relative;

												.content-audio {
													display: flex;
													justify-content: space-between;
													align-items: center;
													width: 390rpx;
													height: 80rpx;
													// background: linear-gradient(151deg, #f6b850 0%, #F09500 100%);
													// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(95, 163, 255, 0.3);
													// border-radius: 40rpx 40rpx 40rpx 40rpx;
													font-size: 30rpx;
													font-family: Source Han Sans CN-Regular, Source Han Sans CN;
													font-weight: 400;
													color: #FFFFFF;
													line-height: 36rpx;
													background-image: url('@/static/popularaudio.png');
													background-repeat: no-repeat;
													background-size: 100%;

													@keyframes load {
														0% {
															background-color: #fff;
														}

														50% {
															background-color: #ccc;
														}

														100% {
															background-color: #fff;
														}
													}

													.content-audio-left {
														margin-left: 57rpx;
														display: flex;
														align-items: center;

														.audio-left-hu {
															border-radius: 30rpx 0 0;
															width: 30rpx;
															height: 30rpx;
															// background-color: red;
															transform: rotate(135deg);
															position: relative;
															overflow: hidden;
															margin-right: 15rpx;

															.animations-audio {
																background-color: #ccc;
																animation: load 2.5s 1s infinite linear;
															}

															.left-hu-one {
																width: 60rpx;
																height: 60rpx;
																background-color: #fff;
																border-radius: 50%;
																display: flex;
																justify-content: center;
																align-items: center;

																.left-hu-two {
																	width: 50rpx;
																	height: 50rpx;
																	background-color: #f5b447;
																	border-radius: 50%;
																	display: flex;
																	justify-content: center;
																	align-items: center;

																	.animations-audio-two {
																		background-color: #ccc;
																		animation: load 2.3s 1s infinite linear;
																	}

																	.left-hu-three {
																		width: 40rpx;
																		height: 40rpx;
																		background-color: #fff;
																		border-radius: 50%;
																		display: flex;
																		justify-content: center;
																		align-items: center;

																		.left-hu-fore {
																			width: 30rpx;
																			height: 30rpx;
																			background-color: #f5b447;
																			border-radius: 50%;
																			display: flex;
																			justify-content: center;
																			align-items: center;

																			.animations-audio-three {
																				background-color: #ccc;
																				animation: load 2s 1s infinite linear;
																			}

																			.left-hu-five {
																				width: 20rpx;
																				height: 20rpx;
																				background-color: #fff;
																				border-radius: 50%;
																				display: flex;
																				justify-content: center;
																				align-items: center;
																			}
																		}
																	}
																}
															}

														}
													}

													.content-audio-misc {
														font-size: 24rpx;
														font-family: Source Han Sans CN-ExtraLight, Source Han Sans CN;
														font-weight: 250;
														color: #FFFFFF;
														line-height: 36rpx;
														margin-right: 48rpx;
													}
												}
											}


										}

									}

								}


								.comment-bottom {
									height: 50px;
									display: flex;
									justify-content: space-between;
									align-items: center;

									.comment-bottom-left {
										color: #999999;
										font-size: 26rpx;
									}

									.comment-bottom-right {
										display: flex;
										position: absolute;
										right: 10rpx;

										.icon {
											width: 80rpx;
											display: flex;
											align-items: center;
											margin-right: 20rpx;

											.imgs-css {
												width: 40rpx;
												height: 40rpx;
											}

											.imgs-css1 {
												width: 38rpx;
												height: 38rpx;
											}

											.imgs-css2 {
												width: 36rpx;
												height: 36rpx;
											}

											.icon-text {
												color: #999999;
												font-size: 28rpx;
												width: 40rpx;
												margin-left: 4rpx;
											}
										}
									}
								}
							}

							.body-list-bootom {
								// position: absolute;
								// top: 50rpx;
								width: 100%;
								height: 470rpx;
								background-color: #fff;
								border-radius: 21rpx;
								box-shadow: 0rpx 2rpx 21rpx 0rpx rgba(0, 0, 0, 0.05);
								// z-index: 1;
								overflow: hidden;
								position: relative;

								.list-bootom-top {
									width: 100%;
									box-sizing: border-box;
									padding: 25rpx 42rpx 0 25rpx;
									margin-bottom: 15rpx;

									.bootom-top-left {
										display: flex;
										align-items: center;

										.bottom-left-name {
											font-size: 26rpx;
											font-family: Source Han Sans CN-Bold, Source Han Sans CN;
											font-weight: 700;
											color: #567895;
											line-height: 42rpx;
											margin-left: 12rpx;
											max-width: 320rpx;
											overflow: hidden;
											white-space: nowrap;
											text-overflow: ellipsis;
										}
									}

									.bootom-top-right {
										font-size: 24rpx;
										font-family: Source Han Sans CN-Regular, Source Han Sans CN;
										font-weight: 400;
										color: #999999;
										line-height: 45rpx;
										position: absolute;
										right: 40rpx;
									}
								}

								.hideblean {
									width: 90%;
									height: calc(100% - 100rpx);
									// background-color: red;
									background-color: transparent;
									position: absolute;
									// backdrop-filter: blur(5px);
									z-index: 11;
								}

								.hideblean::after {
									content: '查看完整内容 >';
									color: #CE994F;
									display: flex;
									justify-content: center;
									align-items: center;
									margin-top: 120px;
									font-weight: bold;
								}

								.container {
									height: 255rpx;
									overflow: hidden;

									.list-bootom-content {
										word-break: break-all;

										width: 100%;
										box-sizing: border-box;
										padding: 20rpx 30rpx 0 10rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										// -webkit-line-clamp: 4;
										-webkit-box-orient: vertical;
										font-size: 30rpx;
										font-family: Source Han Sans CN-Regular, Source Han Sans CN;
										font-weight: 400;
										color: #000000;
										line-height: 42rpx;
										margin-bottom: 28rpx;
									}

									.list-bootom-bootm {
										width: 50%;
										height: 200rpx;
										box-sizing: border-box;
										padding-left: 30rpx;
									}

									.list-bootom-bootmtwo {
										width: 100%;
										box-sizing: border-box;
										padding: 2rpx 42rpx 10rpx 25rpx;

										.mide-content-audio {
											width: 100%;
											text-align: left;
											height: 100rpx;
											margin: 20rpx 0;

											// position: relative;
											.content-audio-body {
												width: 100%;
												text-align: left;
												position: relative;

												.content-audio {
													display: flex;
													justify-content: space-between;
													align-items: center;
													width: 390rpx;
													height: 80rpx;
													// background: linear-gradient(151deg, #f6b850 0%, #F09500 100%);
													// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(95, 163, 255, 0.3);
													// border-radius: 40rpx 40rpx 40rpx 40rpx;
													font-size: 30rpx;
													font-family: Source Han Sans CN-Regular, Source Han Sans CN;
													font-weight: 400;
													color: #FFFFFF;
													line-height: 36rpx;
													background-image: url('@/static/popularaudio.png');
													background-repeat: no-repeat;
													background-size: 100%;

													@keyframes load {
														0% {
															background-color: #fff;
														}

														50% {
															background-color: #ccc;
														}

														100% {
															background-color: #fff;
														}
													}

													.content-audio-left {
														margin-left: 57rpx;
														display: flex;
														align-items: center;

														.audio-left-hu {
															border-radius: 30rpx 0 0;
															width: 30rpx;
															height: 30rpx;
															// background-color: red;
															transform: rotate(135deg);
															position: relative;
															overflow: hidden;
															margin-right: 15rpx;

															.animations-audio {
																background-color: #ccc;
																animation: load 2.5s 1s infinite linear;
															}

															.left-hu-one {
																width: 60rpx;
																height: 60rpx;
																background-color: #fff;
																border-radius: 50%;
																display: flex;
																justify-content: center;
																align-items: center;

																.left-hu-two {
																	width: 50rpx;
																	height: 50rpx;
																	background-color: #f5b447;
																	border-radius: 50%;
																	display: flex;
																	justify-content: center;
																	align-items: center;

																	.animations-audio-two {
																		background-color: #ccc;
																		animation: load 2.3s 1s infinite linear;
																	}

																	.left-hu-three {
																		width: 40rpx;
																		height: 40rpx;
																		background-color: #fff;
																		border-radius: 50%;
																		display: flex;
																		justify-content: center;
																		align-items: center;

																		.left-hu-fore {
																			width: 30rpx;
																			height: 30rpx;
																			background-color: #f5b447;
																			border-radius: 50%;
																			display: flex;
																			justify-content: center;
																			align-items: center;

																			.animations-audio-three {
																				background-color: #ccc;
																				animation: load 2s 1s infinite linear;
																			}

																			.left-hu-five {
																				width: 20rpx;
																				height: 20rpx;
																				background-color: #fff;
																				border-radius: 50%;
																				display: flex;
																				justify-content: center;
																				align-items: center;
																			}
																		}
																	}
																}
															}

														}
													}

													.content-audio-misc {
														font-size: 24rpx;
														font-family: Source Han Sans CN-ExtraLight, Source Han Sans CN;
														font-weight: 250;
														color: #FFFFFF;
														line-height: 36rpx;
														margin-right: 48rpx;
													}
												}
											}


										}

									}

								}

								.comment-bottom {
									// line-height: 10;
									// height: 110px;
									// display: flex;
									// align-items: center;
									// padding-top: 25rpx;
									position: absolute;
									display: flex;
									justify-content: space-between;
									align-items: center;
									// bottom: 0;
									bottom: 15px;
									width: 100%;


									.comment-bottom-left {
										color: #999999;
										font-size: 26rpx;
									}

									.comment-bottom-right {
										display: flex;
										position: absolute;
										right: 10rpx;

										.icon {
											width: 80rpx;
											display: flex;
											align-items: center;
											margin-right: 20rpx;

											.imgs-css {
												width: 40rpx;
												height: 40rpx;
											}

											.imgs-css1 {
												width: 38rpx;
												height: 38rpx;
											}

											.imgs-css2 {
												width: 36rpx;
												height: 36rpx;
											}

											.icon-text {
												color: #999999;
												font-size: 28rpx;
												width: 40rpx;
												margin-left: 4rpx;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.questiondetails-page-flex {
			width: 100%;
			box-sizing: border-box;
			padding: 0 27rpx;
			position: fixed;
			z-index: 99;
			bottom: 40rpx;

			.page-flex-content {
				width: 100%;
				height: 80rpx;
				background: #fff;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #999999;
				line-height: 42rpx;
			}

		}
	}
</style>
<style>
	/deep/.uni-popup .uni-popup__wrapper {
		border-radius: 15rpx 15rpx 15rpx 15rpx !important;
	}
</style>